import './index.scss'
import { Card, Button, Checkbox, Form, Input} from 'antd'
import { LockOutlined, UserOutlined, RightCircleTwoTone } from '@ant-design/icons'
import { Link, useNavigate } from 'react-router-dom'
import { fetchUserLogin } from '@/store/modules/userStore'
import { useDispatch } from 'react-redux'


const Login = () => {
  const navigate = useNavigate()
  const dispatch = useDispatch()
  // 点击登录按钮时触发
  const onFinish = async formValue => {
    const res = await dispatch(fetchUserLogin(formValue))
    // 当返回参数为真时，登录成功，跳转首页
    if (res) {
      navigate('/')
    }
    
  }

  return (
    <div className="login">
      <Card className="login-container">
        <div className='header'>博客系统欢迎您</div>
        {/* 登录表单 */}
        <Form 
          onFinish={onFinish}
          validateTrigger={['onBlur']}>
        <Form.Item
        name="username"
        rules={[
          {
            required: true,
            message: '请输入用户名',
          },
        ]}
      >
        <Input
            prefix={<UserOutlined/>} 
            placeholder="请输入用户名" 
            size="large"/>
      </Form.Item>
      <Form.Item
        name="password"
        rules={[
          {
            required: true,
            message: '请输入密码',
          },
        ]}
      >
        <Input.Password
          prefix={<LockOutlined/>}
          type="password"
          placeholder="初始密码为123456"
          size="large"
        />
      </Form.Item>
      <Form.Item>
        <Form.Item name="remember" valuePropName="checked" noStyle>
          <Checkbox>记住我</Checkbox>
        </Form.Item>
        <Link className='login-form-forgot' to={'/forgetpassword'}>忘记密码</Link>
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit" className="login-form-button" size="large">
          登录
        </Button>
        <RightCircleTwoTone />
        <Link className='to-register' to={'/register'}>去注册</Link>
      </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default Login